


<link rel="stylesheet" href="__PUBLIC__/css/gouwu.css">
<div class="clear"></div>
<div class="s-g">
    <div class="s-breadcrumb-area">
        <a href="" title="首页">首页</a>
        >
        <a href="" title="手机">{$data.class_id}</a>
        >
        <a href="" title="荣耀">荣耀</a>
        >
        <span style=" font-size: 12px;color: #333;">{$data.product_name} {$data.product_info}</span>
    </div>
</div>
<div class="product box">
    <div class="s-left small">
        <img src="__UPLOAD__/{$data.image}">
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="__UPLOAD__/{$data.image}" style="width: 800px;height: 800px">
    </div>


    <div class="s-right">
        <div class="product-meta">
            <h1>{$data.product_info}</h1>
        </div>

        <div class="product-slogan">
            <a href="" target="_blank">【标配配版省300，高配版省400，再赠配件好礼】</a>
            <span style="font-size: 12px;color: #3a3a3a;">精致外观/双镜头/5.7英寸2K屏/搭载麒麟960芯片/长久续航。11.2-30客户端下单赢手机、手表。</span>
        </div>

        <div class="product-price">

            <div class="product-price-info">
                <label>抢购价</label>
                <span style="font-weight: bold">¥{$data.current_price}</span>
                <s style="color: #a4a4a4;padding-left: 8px;">¥&nbsp;{$data.original_price}</s>
            </div>

            <div class="product-activity">
                <div class="u1">
                    <i></i>
                    <samp>限时特价</samp>
                </div>
                <div class="u1">
                    <i></i>
                    <samp>支持分期</samp>
                </div>
                <div class="u1">
                    <i></i>
                    <samp>赠送积分</samp>
                </div>
            </div>

            <div class="product-p">
                <img src="__PUBLIC__/image/btn-roll.png">
            </div>
        </div>

        <div style="clear: both"></div>

        <div class="line"></div>

        <div class="pro-skus">
            <div class="d1">
                <p>选择颜色</p>
                <input type="hidden" name="color" id="ipt_color">
                <div class="d1-r js_color_select">
                    <ul>
                        <li>
                            <div class="color">
                                <a href="#" title="铂光金">
                                    <img src="__PUBLIC__/image/40_40_1506587160089mp.jpg" alt="铂光金">
                                    <p>
                                        <samp>铂光金</samp>
                                    </p>
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="color">
                                <a href="#" title="幻夜黑">
                                    <img src="__PUBLIC__/image/40_40_1506587814855mp.jpg" alt="幻夜黑">
                                    <p>
                                        <samp>幻夜黑</samp>
                                    </p>
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="color">
                                <a href="#" title="极光蓝">
                                    <img src="__PUBLIC__/image/40_40_1506588230127mp.jpg" alt="极光蓝">
                                    <p>
                                        <samp>极光蓝</samp>
                                    </p>
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="color">
                                <a href="#" title="魅焰红">
                                    <img src="__PUBLIC__/image/40_40_1506592035271mp.jpg" alt="魅焰红">
                                    <p>
                                        <samp>魅焰红</samp>
                                    </p>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div style="clear: both"></div>
            <div class="d1">
                <p>选择制式</p>
                <input type="hidden" name="color">
                <div class="d1-r js_color_select">
                    <ul>
                        <li>
                            <div class="color">
                                <a href="#" title="全网通标配版" class="a">
                                    全网通标配版
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="color">
                                <a href="#" title="全网通高配版" class="a">
                                    全网通高配版
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="color">
                                <a href="#" title="全网通尊享版" class="a">
                                    全网通尊享版
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div style="clear: both"></div>

            <div class="d1">
                <p>选择容量</p>
                <input type="hidden" name="color">
                <div class="d1-r js_color_select">
                    <ul>
                        <li>
                            <div class="color">
                                <a href="#" title="64GB" class="a">
                                    4GB+64GB
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="color">
                                <a href="#" title="6GB+64GB" class="a">
                                    6GB+64GB
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div style="clear: both"></div>
            <div class="d1">
                <p>选择定制</p>
                <input type="hidden" name="color">
                <div class="d1-r js_color_select">
                    <ul>
                        <li>
                            <div class="color">
                                <a href="#" title="无定制" class="a">
                                    无定制
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div style="clear: both"></div>
        </div>

        <div class="product-operation-main">
            <div class="product-description">
                <label>已选择商品:</label>
                <p class="product-selected">铂光金 / 全网通标配版 / 4GB+64GB / 官方标配 / 无定制 </p>
            </div>
        </div>
        <div class="product-operation">

            <form action="__URL__/Settlement" method="post">
            <div class="product-stock">
                <input type="text" class="product-stock-text"  value="1" name="product_carnum" id="product_num">
                <div style="font-size: 20px;text-align: center;cursor: pointer" id="add"><b>+</b></div>
                <div style="font-size: 20px;text-align: center;line-height: 15px;cursor:pointer;" id="less"><b>-</b></div>
            </div>
            <div class="product-button">
                <input type="hidden" id="product_id" name="product_id" value="{$data.product_id}">
                <a class="product-button01" href="#"  id="add_car">加入购物车</a>
                <input class="product-button02" id="add_order" type="submit" value="立即下单">
            </div>
                </form>

            <div class="b_box">
                <div class="b_pro_add" id="b_pro_add">
                    <div class="b_pro_hide" onclick="$('#b_pro_add').hide();"></div>
                    <dl>
                        <div style="clear: both ;"></div>
                        <dt>
                            <s></s>
                        </dt>
                        <dd>
                            <p>{$data.product_info}</p>
                            <div class="pro-add-success-msg">成功加入购物车!</div>
                            <div class="pro_add_button">
                                <a class="button_cart" href="__URL__/shopping">去结算</a>
                                <a class="button_wolking" href="#">继续逛逛&nbsp>></a>
                            </div>
                        </dd>
                    </dl>
                </div>

            </div>



        </div>
            <script>

<<<<<<< HEAD
=======
                $(function () {

>>>>>>> e62ecc1286a0c99c6bc189474fe6782efa8751b7
                    $('#add_car').click(function () {
                        $('#b_pro_add').show();
                    });


                    $('#add_car').click(function (e) {
                        e.preventDefault();//阻止默认行为
                        $.ajax("__URL__/ajax",
                            {
                                type: 'post',
                                dataType: "json",
                                data: {
                                    product_carnum: $('#product_num').val(),
                                    product_id: $('#product_id').val()
                                },
                                success: function (e) {

                                    console.log(e)

                                }
                            }
                        );
                    });
                });


                var add = document.getElementById('add');
                var num = document.getElementById('product_num');
                var less= document.getElementById('less');


                add.onclick = function (){
                    var newnum = num.value;
                    console.log(newnum);
                     i = parseInt(newnum) + 1 ;
                    num.value = i;
                };
                    less.onclick = function (){
                        var newnum = num.value;
                        console.log(newnum);
                        i = parseInt(newnum) - 1 ;
                        num.value = i;
                        if(newnum<2)
                            num.value = 1;
                    };
                    var box = document.getElementsByClassName("box")[0];
                    var small = box.firstElementChild || box.firstChild;
                    var big = box.children[1];
                    var mask = small.children[1];
                    var bigImg = big.children[0];
                    small.onmouseenter = function() {
                        show(mask);
                        show(big);
                    };
                    small.onmouseleave = function() {
                        hide(mask);
                        hide(big);
                    };
                    small.onmousemove = function(event) {
                        event = event || window.event;
                        var pagex = event.pageX || scroll().left + event.clientX;
                        var pagey = event.pageY || scroll().top + event.clientY;
                        var x = pagex - box.offsetLeft - mask.offsetWidth / 2;
                        var y = pagey - box.offsetTop - mask.offsetHeight / 2;
                        if(x < 0) {
                            x = 0;
                        }
                        if(x > small.offsetWidth - mask.offsetWidth) {
                            x = small.offsetWidth - mask.offsetWidth;
                        }
                        if(y < 0) {
                            y = 0;
                        }
                        if(y > small.offsetHeight - mask.offsetHeight) {
                            y = small.offsetHeight - mask.offsetHeight;
                        }
                        console.log(small.offsetHeight);
                        mask.style.left = x + "px";
                        mask.style.top = y + "px";
                        var bili = bigImg.offsetWidth / small.offsetWidth;
                        var xx = bili * x;
                        var yy = bili * y;
                        bigImg.style.marginTop = -yy + "px";
                        bigImg.style.marginLeft = -xx + "px";
                    }




            </script>


        </div>
    </div>
</div>

<div style="clear: both"></div>

<div class="product-tab" style="position: static; top: 0; background: rgb(255, 255, 255); width: 100%; z-index: 100;">
    <div class="layout" id="layoutRelative">
        <div class="line"></div>
        <p>
            <a href="" class="selected">商品详情<em></em></a>
            <a href="" class="">规格参数<em></em></a>
            <a href="">包装与售后<em></em></a>
            <a href="">用户评价<em></em><span>(75926)</span></a>
        </p>
        <div class="product-tab-btn" style="display: none;">
            <a href="" class="product-button02" style="display: inline-block;">加入购物车</a>
            <a href="" class="product-button02" style="display: none;">到货通知</a>
        </div>
    </div>
</div>

<div class="pro">
    <div class="s-pro">
        <p style="margin-top: 0;margin-bottom: 0;"><img src="__PUBLIC__/image/201709271459178540541.jpg"></p>
        <p style="margin-top: 0;margin-bottom: 0;"><img src="__PUBLIC__/image/201709281536438437227.jpg"></p>
        <p style="margin-top: 0;margin-bottom: 0;"><img src="__PUBLIC__/image/201709281536432025223.jpg"></p>
    </div>
</div>

<div class="product-parameter">
    <div class="layout">
        <h2 class="product-title">规格参数</h2>
        <div class="product-parameter-main">
            <h2>主要参数</h2>
            <ul>
                <li>
                    <label>传播名</label>
                    <span>荣耀V9</span>
                </li>
                <li>
                    <label>上市时间</label>
                    <span>2017年02月</span>
                </li>
                <li>
                    <label>CPU型号</label>
                    <span>麒麟960</span>
                </li>
                <li>
                    <label>CPU核数</label>
                    <span>八核+微智核i6</span>
                </li>
                <li>
                    <label>双卡</label>
                    <span>双卡双待单通，主副卡不区分卡槽，Nano SIM</span>
                </li>
                <li>
                    <label>屏幕尺寸</label>
                    <span>5.7英寸</span>
                </li>
                <li>
                    <label>屏幕色彩</label>
                    <span>1670万色</span>
                </li>
                <li>
                    <label>分辨率</label>
                    <span>2560*1440</span>
                </li>
                <li>
                    <label>运行内存（RAM）</label>
                    <span>4GB（备注：可使用的内存容量小于此值，因为手机软件占用的空间）</span>
                </li>
                <li>
                    <label>机身内存（ROM）</label>
                    <span>64GB（备注：可使用的内存容量小于此值，因为手机软件占用的空间）</span>
                </li>
                <li>
                    <label>最大支持扩展</label>
                    <span>最高支持128GB（非标配）</span>
                </li>
                <li>
                    <label>主摄像头</label>
                    <span>1200万黑白+1200万彩色，F2.2光圈</span>
                </li>
                <li>
                    <label>副摄像头</label>
                    <span>800万，F2.0光圈</span>
                </li>
                <li>
                    <label>电池容量</label>
                    <span>4000mAh（典型容量）/3900mAh（最小容量）；支持9V/2A快速充电</span>
                </li>
            </ul>
        </div>
    </div>
</div>

<div style="clear: both"></div>
